<template>
  <div class="container">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" append-to-body @close="close">
      <div class="content-box">
        <el-table height="style" class="jk_common_table004" :data="tableData" border style="width: 100%; height: 100%">
          <el-table-column prop="deviceCode" label="设备型号" width="120"></el-table-column>
          <el-table-column prop="deviceName" label="设备名称" width="140"></el-table-column>
          <el-table-column prop="taskCode" label="任务编号" width="120"></el-table-column>
          <!-- <el-table-column prop="taskName" label="任务名称" width="120"></el-table-column> -->
          <el-table-column prop="taskName" label="任务名称" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taskName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="loseInfluType" label="失效影响类别" width="120"></el-table-column>
          <el-table-column prop="taskGoal" label="任务目的" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taskGoal"></el-input>
            </template>
          </el-table-column>



          <el-table-column prop="taskType" label="任务类型" width="120"></el-table-column>
          <!-- <el-table-column prop="taskInter" label="任务间隔(天)" width="120"></el-table-column> -->
          <el-table-column prop="taskInter" label="任务间隔(天)" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taskInter"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="taskStep" label="任务步骤" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.taskStep"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="area" label="所在区域" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.area"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="apprWay" label="接近方式" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.apprWay"></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="taskStep" label="任务步骤" width="120"></el-table-column>
          <el-table-column prop="area" label="所在区域" width="120"></el-table-column>
          <el-table-column prop="apprWay" label="接近方式" width="120"></el-table-column> -->
          <!-- <el-table-column prop="" label="任务资源">
            <el-table-column prop="" label="备件需求">
              <el-table-column prop="spareName" label="备件" width="120"></el-table-column>
              <el-table-column prop="spareNum" label="数量" width="120"></el-table-column>
            </el-table-column>
            <el-table-column prop="" label="耗材需求">
              <el-table-column prop="consumableName" label="耗材需求" width="120"></el-table-column>
              <el-table-column prop="consumableNum" label="数量" width="120"></el-table-column>
              <el-table-column prop="consumableUnit" label="单位" width="120"></el-table-column>
            </el-table-column>
            <el-table-column prop="" label="工具/设备需求">
              <el-table-column prop="toolName" label="备件" width="120"></el-table-column>
              <el-table-column prop="toolNum" label="数量" width="120"></el-table-column>
            </el-table-column>
            <el-table-column prop="" label="人员需求">
              <el-table-column prop="personSkill" label="人员技能" width="120"></el-table-column>
              <el-table-column prop="personNum" label="数量" width="120"></el-table-column></el-table-column>
            <el-table-column prop="" label="时间需求">
              <el-table-column prop="taskTime" label="任务时间" width="120"></el-table-column>
              <el-table-column prop="manHour" label="工时" width="120"></el-table-column>
            </el-table-column>
          </el-table-column> -->
          <el-table-column prop="consumableName" label="耗材名称" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.consumableName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="consumableNum" label="耗材数量（单位）" width="250">
            <template slot-scope="scope">
              <el-input v-model="scope.row.consumableNum" style="width: 120px;margin:0 10px;"></el-input>
              <el-input v-model="scope.row.consumableUnit" style="width: 80px"></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="" label="备件需求">
            <el-table-column prop="spareName" label="备件" width="120"></el-table-column>
            <el-table-column prop="spareNum" label="数量" width="120"></el-table-column>
          </el-table-column> -->
          <el-table-column prop="toolName" label="备件名称" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.toolName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="toolNum" label="备件数量" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.toolNum"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="personSkill" label="人员技能" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.personSkill"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="personNum" label="人员数量" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.personNum"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="taskTime" label="任务时间" width="250">
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.taskTime"></el-input> -->
              <el-date-picker v-model="scope.row.taskTime" type="datetime" style="width: 200px;"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="manHour" label="任务工期" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.manHour"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="showFooter" slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="false" @click="exportExcelHandler">导 出</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { exportExcel } from "@/api/myApi/wx_renwuguihua.js";
export default {
  name: "",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: () => "",
    },
    showFooter: {
      type: Boolean,
      default: () => false,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    groupId: {
      type: String,
      default: () => "",
    }
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    exportExcelHandler() {
      exportExcel(
        '', { params: { groupId: this.groupId } }
      ).then((res) => {
        // if (res.code == 200) {
        //   this.$message({
        //     message: "导出成功",
        //     type: "success",
        //   });
        // } else {
        //   this.$message({
        //     message: "导出失败",
        //     type: "error",
        //   });
        // }
      });
    },
    /*
    exportWord() {
      let ImageModule = require("docxtemplater-image-module-free");
      let fs = require("fs");
      const expressions = require("angular-expressions");

      let _this = this;

      // 读取并获得模板文件的二进制内容，放在项目中即可
      JSZipUtils.getBinaryContent(
        "/temp/staticAnalysis.docx",
        function (error, content) {
          if (error) {
            throw error;
          }
          expressions.filters.size = function (input, width, height) {
            return {
              data: input,
              size: [width, height],
            };
          };
          function angularParser(tag) {
            const expr = expressions.compile(tag.replace(/’/g, "'"));
            return {
              get(scope) {
                return expr(scope);
              },
            };
          }
          let zip = new PizZip(content);
          let doc = new docxtemplater();
          doc.attachModule(imageModule);
          doc.loadZip(zip);
          let nowDate = parseTime(new Date());
          doc.setData({
            // nowtime: nowDate,
            // nownodename: _this.nowNodeName,
            // ..._this.secondTable.topList,
            table: _this.tableData,
            // imagelist: _this.echartsImgs,
            // table1: [],
            // ..._this.rightBot,
          });

          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            };
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, "兴达SPC系统计量型控制图分析报表.docx");
          _this.wordDialog = false;
        }
      );
    },
    */
    /*
    handleDownload() {
      // this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "序号",
          "设备名称",
          "内容",
          "检测结果",
          "判断标准",
          "单位",
          "报警等级",
          "报警时间",
          "摄像头名称",
          "处理结果",
          "处理时间",
          "处理人",
        ]; //要导出后表头是什么，可以跟tableDate中的表头不一致
        const filterVal = [
          "alertId",
          "devName",
          "alertName",
          "currentValue",
          "criteria",
          "value",
          "valueName",
          "createTime",
          "cameraName",
          "alertState",
          "handleTime",
          "handleUser",
        ];
        const data = this.formatJson(filterVal, this.list);

        // const data = this.tableData;
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "报警数据", //导出文件的名，自定义就好
        });
        // this.downloadLoading = false;
      });
    },
    */
    close() {
      this.dialogVisible = false;
      this.$emit("close", false);
    },
    table1delete(row) {
      var index = this.tableData1.indexOf(row);
      if (index != -1) {
        this.tableData1.splice(index, 1);
      }
    },
  },
  created() {
    setTimeout(() => {
      this.dialogVisible = true;
    }, 50);
  },
  mounted() { },
};
</script>
<style lang="scss" scoped>
$modelCreatebgColor: #0e2141;

.content-box {
  // background: linear-gradient(
  //   180deg,
  //   rgba(21, 52, 104, 0.3) 0%,
  //   rgba(12, 29, 57, 0.3) 100%
  // );
  height: 540px;
  display: flex;
  flex-direction: column;

  .content-box-top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;

    .btn_wrap_left,
    .btn_wrap_right {
      display: flex;
      align-items: center;

      .el-form {
        display: inline-block;

        .el-form-item {
          margin-bottom: 0;
        }

        .el-input {
          width: 100px;
        }

        ::v-deep .el-select {
          width: 150px !important;
        }
      }
    }
  }

  .content-box-middle {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
}
</style>
